<template>
	<div class="echarts-box" style="width: 100%; height: 100%">
		<Echart :options="options" id="pie2Chart"></Echart>
	</div>
</template>

<script>
import { graphic } from "echarts";

const animationDuration = 2000;
export default {
	data() {
		return {
			options: {},
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		init(newData) {
			this.options = {
				tooltip: {
					trigger: "item",
					formatter: "{a} <br/>{b} : {c} ({d}%)",
					backgroundColor: "rgba(0,0,0,.6)",
					borderColor: "rgba(147, 235, 248, .8)",
					textStyle: {
						color: "#FFF",
					},
				},
				legend: {
					left: "center",
					bottom: "10",
					data: ["Industries", "Technology", "Forex", "Gold", "Forecasts"],
					textStyle: {
						fontSize: 12,
						color: "#6A93B9",
						// rich 自定义富文本样式
						rich: {
							a: {
								verticalAlign: "bottom",
							},
						},
					},
				},
				series: [
					{
						name: "WEEKLY WRITE ARTICLES",
						type: "pie",
						roseType: "radius",
						radius: [15, 95],
						center: ["50%", "38%"],
						data: [
							{ value: 320, name: "Industries" },
							{ value: 240, name: "Technology" },
							{ value: 149, name: "Forex" },
							{ value: 100, name: "Gold" },
							{ value: 59, name: "Forecasts" },
						],
						animationEasing: "cubicInOut",
						animationDuration,
						label: {
							show: true,
							position: "outside",
							color: "#ddd",
							fontSize: 14,
						},
					},
				],
			};
		},
	},
};
</script>

<style lang="scss" scoped></style>
